<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>index</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="referrer" content="never" />
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="static/css/common.css" />
		<link rel="stylesheet" href="static/css/terminalwork.css" />
		<style>
			/*.mui-content{
				background-color: #fff;     
			}*/
			/*九宫格样式*/
			*{ touch-action: pan-y; }
			.home_icon {
				width: 50%;
				border-radius: 5px;
			}
			.mui-icon {

			}	
			.operbtn{
				width:12vw;
				height:6vw;
				margin-left:1vw;
				box-sizing: border-box;
				border:1px solid #004A86;
				border-radius:5vw;
				text-align:center;
				line-height:6vw;
				font-size:3.5vw !important;
				color:#004a86 !important;
			}
			.sit-tab{
				display:flex;
				position:relative;
				height:36px;
				border-bottom:1px solid #004a86;
				background:#fff;
			}
			.sit-tab-item{
				position: relative;
				width:25vw;
				text-align:center;
				line-height:36px;
				font-size:4vw;
			}
			.sit-tab .sit-tab-line{
				position:absolute;
				left:0;
				bottom:0;
				width:25vw;
				height:3px;
				background:#004a86;
  				transition: left 0.5s;
			}
			.sit-tab-num{
				position:absolute;
				right:1.5vw;
				top:1vh; 
				width:3vw;
				height:3vw;
				border-radius:50%;
				background: #f00;
				font-size:3vw;
				color:#fff;
				text-align:center;
				line-height:6vw;
			}
			.neios-station-change{
				position:absolute;
				right:0;
				top:0;
				width:50%;
				display:flex;
			}
			.neios-station-name{
				width:70%;
				font-size:14px;
				line-height:44px;
				color:#fff;
				text-align:right;
				overflow:hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.neios-station-btn{
				width:30%;
				text-align:center;
				font-size:14px;
				color:#fff;
				line-height:44px;
				display:none;
			}
			.neios-station-dialog-box{
				display:none;
				position:fixed;
				z-index:999;
				top:0;
				bottom:0;
				right:0;
				left:0;
				background:rgba(0,0,0,0.2);
			}
			.neios-station-dialog{
				position:absolute;
				left:10%;
				top:20vh;
				width:80%;
				max-height:60vh;
				overflow:auto;
				background:#fff;
				border-radius:6px;
				padding:8px 0;
				z-index: 9999;
			}
			.neios-station-dialog-item{
				position:relative;
				margin:0 20px;
				padding:8px 8px 8px 30px;
				font-size:4vw;
				line-height:6vw;
			}
			.neios-station-dialog-item.on{
				color:#004a86;
			}
			.neios-station-dialog-item.on::before{
				position:absolute;
				left:0;
				top:50%;
				width:6px;
				height:6px;
				margin-top:-3px;
				border-radius:50%;
				background:#004a86;
				content:'';
			}
			.eitem-title{
				color: #275EB1;

				width: 55vw;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis
			}
		</style>
	</head>

	<body>
		<div id="content" v-cloak>
		<header class="mui-bar mui-bar-nav mui-bar-nav-bg">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 id="title" class="mui-title" style="width:50%;left:0">现场运维</h1>
			<div class="neios-station-change">
				<div class="neios-station-name"></div>
				<div class="neios-station-btn" v-show="tabItem == 0" style="display:none;">切换</div>
			</div>
		</header>
		<div class="mui-content" >
			<div class="neios-station-dialog-box">
				<div class="neios-station-dialog">
					<div class="neios-station-dialog-item"
					 v-for='(item,index) in stationList'
					 @click="changeStation(item)">{{item.name}}</div>
				</div>
			</div>
			<div class="sit-tab">
				<div class="sit-tab-item" @click="tabChange('0')">日常记录</div>
				<div class="sit-tab-item" @click="tabChange('1')">培训教育</div>
				<div class="sit-tab-item" @click="tabChange('2')">缺陷隐患记录</div>
				<div class="sit-tab-item search-list-tab" @click="tabChange('3')">综合查询</div>
				<div class="sit-tab-line"></div>
			</div>
			<div v-if="tabItem == '0'">
				<ul class="mui-table-view mui-grid-view mui-grid-9" style="border-top: none;">
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" id="project"  v-for="(item,index) in menuList" :key="index" @click="navTo(item.path)">
					  <a href="#">
						<span class="mui-icon ">
						  <div class="notie_num" v-if="item.num>0">{{item.num}}</div>
						  <img :src="item.icon" class="home_icon" />
						</span>
						<div class="mui-media-body">{{item.name}}</div>
					  </a>
					</li>
				</ul>
			</div>
			<div v-show="tabItem == '1'">
				<div class="top">
					<div class="search-model" style="width: 96vw;">
						<div class="mui-input-row mui-search">
							<input type="search" v-model="educationKeywords" @input="educationChange" class="mui-input-clear" style="background-color: #fff;" placeholder="请输入关键字信息">
						</div>
					</div> 
				</div>
				<div id="educationList">
					<div class="list">		
						<div  class="flex-between" v-for="(item,index) in educationList" :key="index">	
							<div>
								<div class="flex-between">
									<div class="flex-row" @click="hideOperBtn()">
										<div class="label">培训主题:</div>
										<div class="eitem-title" >{{item.activityContent}}</div>
									</div>
								</div>	
								<div class="flex-between">
									<div class="flex-row" @click="hideOperBtn()">
										<div class="label">类型:</div>
										<div v-if="item.activityType =='00'">安全活动</div>		
										<div v-if="item.activityType =='01'">培训记录</div>	
										<div v-if="item.activityType =='10'">应急演练</div>	
										<div v-if="item.activityType =='11'">反事故演习</div>
										<div v-if="item.activityType =='12'">事故预想</div>	
									</div>
									<div class="flex-row" @click="hideOperBtn()">
										<div class="label">状态:</div>
										<div>{{item.statusText}}</div>					
									</div>
								</div>
							</div>
							<div  v-if="userInfo.userId.toUpperCase() == item.hostStaffCode.toUpperCase()">
								<div class="terminalwork-list-receivebtn" onclick="showOperBtn(this)">操作</div>
								<div class="terminalwork-list-operbtn todo">
									<div class="terminalwork-list-operbtn-in">
										<div @tap="navToeducation(item)" class="operbtn"  v-if="!(item.status == 1 && item.activityType.indexOf('0') == 0)">查看</div>
										<div @tap="jiHuo(item)" class="operbtn" v-if="  item.status == 0">激活</div>
										<div @tap="navToeducation(item)" class="operbtn" v-if="item.activityType.indexOf('0') == 0 && item.status == 1">参与</div>
										<div @tap="close(item)" class="operbtn" v-if="item.activityType.indexOf('0') == 0 && item.status == 2">关闭</div>
										<div @tap="com(item)" class="operbtn" v-if="item.activityType.indexOf('0') == 0 && item.status == 1">完成</div>
									</div>
								</div>
							</div>  
							<div v-else>
								<div class="terminalwork-list-receivebtn" onclick="showOperBtn(this)">操作</div>
								<div class="terminalwork-list-operbtn todo">
									<div class="terminalwork-list-operbtn-in">
										<div class="operbtn" @tap="navToeducation(item)" v-if="item.status ==1 && item.activityType.indexOf('0') == 0">参与</div>
										<div class="operbtn" @tap="navToeducation(item)" v-if="item.status ==2 && item.activityType.indexOf('0') == 0">补习</div>
										<div class="operbtn" @tap="navToeducation(item)">查看</div>
										
									</div>
								</div>
								
							</div>
						</div>	
					</div>
				</div>
			</div>
			<div v-if="tabItem == '2'">
				
			</div>
			<div v-if="tabItem == '3'" class="terminalwork">
				
			</div>
			
			
		</div>
	</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/vue.js"></script>
		<script type="text/javascript" src="../../js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="static/js/neiosRequst.js"></script>
		<script type="text/javascript" src="static/js/neiosCommon.js"></script>
		<script type="text/javascript" charset="utf-8">
		var cloak = ''  
		projectVM = new Vue({
			el: "#content",
			data: {
				isShowAppoint:false,
				selectRow:{},
				page:1,
				educationKeywords:'',
				stationList:[], // 电站列表
				pageIndex:1,
				user:'',
				userInfo:'',
				activityContent:'',
				educationList:[],
				menuList:[{
				name:'交接班',icon:'static/images/sit-home01.png',num:0,path:'dailyRecord/shiftsChange/index.html'
				},{
					name:'钥匙借用',icon:'static/images/sit-home02.png',num:0,path:'dailyRecord/keyBorrow/index.html'
				},{
					name:'变压器有载调压',icon:'static/images/sit-home03.png',num:0,path:'dailyRecord/transformer/index.html'
				},{
					name:'保护压板投退',icon:'static/images/sit-home05.png',num:0,path:'dailyRecord/platenProtect/index.html'
				},{
					name:'涉网设备投退',icon:'static/images/sit-home04.png',num:0,path:'dailyRecord/network/index.html'
				},{
					name:'工器具',icon:'static/images/sit-home06.png',num:0,path:'terminalwork/toolCheck/toolCheckList.html'
				}],
				tabItem:'0', // tab展示
				isRole:true,
			},
			mounted: function() {
				let _this = this 
				// 获取人员信息
				let userInfo = JSON.parse(localStorage.getItem('neiosUser'))
				this.userInfo = userInfo
				this.getEducation()
				console.log("USERINFO:"+JSON.stringify(userInfo))
				//弹出版本号
				let versionCode = "v1.0.9"		
				// mui.toast(userInfo.userName+",版本号:"+versionCode)
				//===角色判断任务修改===
				//如果配置了多个角色 按照最高角色显示
				// if (userInfo.roles.indexOf('NEIOS_STATION') > -1 && userInfo.roles.indexOf('NEIOS_HEAD') == -1 && userInfo.roles.indexOf('NEIOS_AREA_COMPANY') == -1){
				// 	//场站用户
				//  	if (userInfo.stationNewCode == null || userInfo.stationNewCode == '' || userInfo.stationNewCode == undefined) {
				//  		$('.sit-tab-item').hide()
				//  		$('.search-list-tab').show() 
				//  		this.tabItem = '3'
				//  		this.isRole = false
				//  	} else {
				//  		$('.neios-station-name').text(localStorage.getItem('neiosStationName'))
				//  		if (userInfo.stationNewCodes.length > 1) {
				//  			$('.neios-station-btn').show()
				//  			for (let a = 0; a < userInfo.stationNewCodes.length; a++) {
				//  				let item = {
				//  					name : userInfo.stationNewNames[a],
				//  					code : userInfo.stationNewCodes[a]
				//  				}
				//  				_this.stationList.push(item)
				//  			}
				//  		}
				//  	}
				// }else{
				// 	//非场站用户
				//  	$('.sit-tab-item').hide()
				//  	$('.search-list-tab').show() 
				//  	this.tabItem = '3'
				//  	this.isRole = false
				//  	setTimeout(function() {
				//  		_this.tabChange('3')
				//  	}, 700);
			 //    }
				if (userInfo.roles.indexOf('NEIOS_STATION') == -1) {
					$('.sit-tab-item').hide()
					$('.search-list-tab').show() 
					this.tabItem = '3'
					this.isRole = false
					setTimeout(function() {
						_this.tabChange('3')
					}, 700);
				} else {
					if (userInfo.stationNewCode == null || userInfo.stationNewCode == '' || userInfo.stationNewCode == undefined) {
						$('.sit-tab-item').hide()
						$('.search-list-tab').show() 
						this.tabItem = '3'
						this.isRole = false
					} else {
						$('.neios-station-name').text(localStorage.getItem('neiosStationName'))
						if (userInfo.stationNewCodes.length > 1) {
							$('.neios-station-btn').show()
							for (let a = 0; a < userInfo.stationNewCodes.length; a++) {
								let item = {
									name : userInfo.stationNewNames[a],
									code : userInfo.stationNewCodes[a]
								}
								_this.stationList.push(item)
							}
						}
					}
				}
				//===角色判断任务修改===
			},
			methods: {
				getNowdate(){
					var date = new Date()
						var year = date.getFullYear()
						var month = date.getMonth()
						var day = date.getDate()
						var hour = date.getHours()
						var min = date.getMinutes()
						 var sec = date.getSeconds()
						month = month*1 + 1
						if (month.toString().length < 2) {
							month = '0' + month
						}
						if (day.toString().length < 2) {
							day = '0' + day
						}
						if (hour.toString().length < 2) {
							hour = '0' + hour
						}
						if (min.toString().length < 2) {
							min = '0' + min
						}
						if (sec.toString().length < 2) {
							sec = '0' + sec
						}
						var nowDate = year + '-' + month + '-' + day + ' ' + hour + ':' + min +':' + sec	
						return nowDate
				},
				// 显示操作按钮
				 showOperBtn(el){
					$('.todo').css('width','0');
					$(el).next().css('width','39vw');
				},
				// 隐藏操作按钮
				hideOperBtn () {
					$('.todo').css('width','0');
					$('.toAppoint').css('width','0');
				},
				//监听输入框
				educationChange(){
					console.log('====')
					clearTimeout(cloak)
					this.page = 1
					this.educationList = []
					cloak = setTimeout(() => {
						this.getEducation()
					}, 500);
				},
				// 切换场站
				changeStation (item) { 
					let userInfo = JSON.parse(localStorage.getItem('neiosUser'))
					userInfo.stationNewName = item.name
					userInfo.stationNewCode = item.code
					this.userInfo = userInfo
					console.log(JSON.stringify(userInfo))
					localStorage.setItem('neiosUser',JSON.stringify(userInfo))
					$('.neios-station-dialog-box').hide()
					localStorage.setItem('neiosStationName',item.name)
					localStorage.setItem('neiosStationCode',item.code)
					$('.neios-station-name').text(item.name)
					this.tabItem = '0';
					plus.webview.close('trouble')
					plus.webview.close('search') 
					$(".sit-tab-line").css('left','0');
					projectVM.pageIndex = 1
					projectVM.getEducation()
				},
				//关闭
				close(item){
					var that = this
					var btnArray= ['否','是']
					mui.confirm('是否确定关闭?','确认',btnArray,function(e){
						  if (e.index == 1) {
							that.complete(item)
						  }
						  else{
							  
						  }
					})
				},
				//完成
				com(item){
					var that = this
					var btnArray= ['否','是']
					mui.confirm('是否确定完成?','确认',btnArray,function(e){
						  if (e.index == 1) {
							  that.navToeducation(item)
						  }
						  else{
							  
						  }
					})
				},
				//激活
				jiHuo(item){
					var that = this
					var btnArray= ['否','是']
					mui.confirm('是否确定激活?','确认',btnArray,function(e){
						  if (e.index == 1) {
	
							  that.complete(item)
						  }
						  else{
							  
						  }
					})
				},
				//培训完成 && 激活
				complete(e){
					var that = this
					var myDate = new Date();
					var param = {
						trainingDrill:{
							begTime:e.begTime,
							endTime:this.getNowdate(),
							activityType:e.activityType,
							status:Number(e.status) + 1,
							trainingDrillid:e.trainingDrillId,
										
						},
						currentUser:this.userInfo
					}
					console.log(JSON.stringify(param))
					
					mui.neiosRequst.httpRequst('/app/tranEducation/updateTrainingDrill', param,
						function(data) {
							console.log(JSON.stringify(param))
							console.log(JSON.stringify(data))
							if(data.code == 0){
								mui.toast('操作成功')
								that.pageIndex = 1
								that.educationList=[]
								that.getEducation()
							}
						else{
							mui.toast(data.msg)
						}
						},
						function(data){
							
						})
				},
				//获取培训教育列表
				getEducation(){
					var that = this
					let param = {
						pageIndex:this.pageIndex,
						pageSize:10,
						role:this.userInfo.roles,
						newAreaCode:this.userInfo.companyNewCode,
						keyWord: this.educationKeywords,
						newStationCode:[this.userInfo.stationNewCode],
						searchType:0
					}
					console.log(JSON.stringify(param))
					mui.neiosRequst.httpRequst('/app/tranEducation/getTrainingDrillList', param,
						function(data) {
								
								mui('#educationList').pullRefresh().endPulldownToRefresh(true);
								if(that.pageIndex == 1){
									that.educationList = data.data.records
								}
								else{
									that.educationList = that.educationList.concat(data.data.records)
								}
													
								if(that.pageIndex < data.data.pages){
									that.pageIndex += 1
									mui('#educationList').pullRefresh().endPullupToRefresh();
								}
								else{
									if(that.pageIndex == 1 && data.data.records.lentgh  ==0){
										mui.toast('暂无数据')
									}
								
									mui('#educationList').pullRefresh().endPullupToRefresh(true);
									
													
								}
						},
						function() {
							console.log("查询失败!");
						}
					);
				},
				navTo(e){
					mui.openWindow({
            			url: e,
            			id: e,
						extras: {
							
						},
					waiting: {
					autoShow: false
					}
        			});
				},
				navToeducation(e){
					if(e.activityType >=10){
					var	url="education/drill.html"
					}
					else{
						var	url="education/train.html"
					}
					mui.openWindow({
            			url: url,
            			id: url,
						extras: {
							trainingDrill: JSON.stringify(e)
						},
					waiting: {
					autoShow: false
					}
        			});
					localStorage.setItem('trainingDrill', JSON.stringify(e));
				},
				
				// 点击tab切换
				tabChange (type) { 
					var that = this
					if (type == '0') { // 日常记录

						this.tabItem = '0';
						plus.webview.close('trouble')
						plus.webview.close('search') 
						$(".sit-tab-line").css('left','0');
						setTimeout(()=> {
							if (this.userInfo.stationNewCodes.length > 1) {
								$('.neios-station-btn').show()
								}
						}, 10);
					
			
					
						
					} else if (type == '1') { // 培训教育
						this.tabItem = '1'; 
						plus.webview.close('trouble')
						plus.webview.close('search')
						$(".sit-tab-line").css('left','25vw');
					} else if (type == '2') { // 缺陷隐患记录 
						$(".sit-tab-line").css('left','50vw'); 
						this.tabItem = '2';
						plus.webview.create('trouble/troubleList.html','trouble', {top:'80px',bottom:'0px'})
						plus.webview.show('trouble')
						plus.webview.close('search')
					} else if (type == '3') { // 综合查询 
						if (this.isRole) {
							$(".sit-tab-line").css('left','75vw');
						}
						this.tabItem = '3';
						plus.webview.create('search/searchList.html','search', {top:'80px',bottom:'0px'})
						plus.webview.close('trouble')
						plus.webview.show('search') 
					}
				},
			}
		})
		mui.init({
				pullRefresh: {
				  container: "#educationList", //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
				  down: { //下拉刷新
					style: 'circle',
					height: 50, //可选,默认50.触发下拉刷新拖动距离,
					auto: false, //可选,默认false.首次加载自动下拉刷新一次
					contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
					contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
					contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
					callback: async function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					 projectVM.pageIndex = 1
					 projectVM.getEducation()
					}
				  },
				  up: { //上拉加载
					height: 50, //可选.默认50.触发上拉加载拖动距离
					auto: false, //可选,默认false.自动上拉加载一次
					contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
					contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
					callback: async function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					console.log('========')
						projectVM.getEducation()
					}
				  }
				}
			  });
			$('.neios-station-btn').click(function(){
				this.tabItem = '0';
				plus.webview.close('trouble')
				plus.webview.close('search') 
				$(".sit-tab-line").css('left','0');
				let userInfo = JSON.parse(localStorage.getItem('neiosUser'))
				$('.neios-station-dialog-item').removeClass('on')
				let stationDom = $('.neios-station-dialog-item')
				for (let a = 0; a < userInfo.stationNewCodes.length; a++) {
					if (userInfo.stationNewCodes[a] == localStorage.getItem('neiosStationCode')) {
						$(stationDom[a]).addClass('on')
					}
				}
				$('.neios-station-dialog-box').show()
			})
			// 显示操作按钮
			function showOperBtn (el) {
				$('.todo').css('width','0');
				$(el).next().css('width','39vw');
			}
			window.addEventListener('refresh', function(e){//执行刷新
				location.reload();
			});
		</script>
	</body>

</html>